/**
 * Created by YJH on 2018/5/30.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
} from 'react-native';
export default class NavigationBarUtil {

    static getMoreMenuButton(callBack){
        return <TouchableOpacity  ref='moreMenuButton' onPress={callBack}>
            <Image
                style={{width: 20, height: 20, margin: 5}}
                source={require('../../res/images/ic_more_vert_white_48pt.png')}
            />
        </TouchableOpacity>
    }
    static getLeftButton(callBack) {
        return <TouchableOpacity onPress={callBack}>
            <Image
                style={{width: 20, height: 20, margin: 10}}
                source={require('../../res/images/ic_arrow_back_white_36pt.png')}
            />
        </TouchableOpacity>
    }


    static getRightButtonWord(callBack, rightTxt) {
        return <TouchableOpacity onPress={callBack}>
            <Text style={styles.text} onPress={callBack}>{rightTxt}</Text>
        </TouchableOpacity>
    }

    /**
     * 功能：获取设置页面的item的UI布局
     * @param iconLeft item 左侧的图标
     * @param text item 名字
     * @param tintColor item 左侧图标的颜色
     * @param expandableIcon item 右侧图标
     * @param callback item的点击回调函数
     */
    static getSettingItem(iconLeft, text, tintStyle, expandableIcon, callback) {

        return (
            <TouchableOpacity onPress={callback}>
                <View style={styles.item}>
                    <View style={styles.item}>

                        <Image
                            resizeMode='stretch'
                            style={
                                [{width: 20, height: 20, alignSelf: 'center'}, tintStyle]}
                            source={iconLeft}/>
                        <Text style={{
                            alignSelf: 'center',
                            fontSize: 16,
                            color: 'black',
                            marginHorizontal: 5
                        }}>{text}</Text>
                    </View>
                    <Image style={
                        [{width: 20, height: 20, alignSelf: 'center'}, tintStyle]}
                           source={expandableIcon ? expandableIcon : require('../../res/images/ic_tiaozhuan.png')}/>
                </View>
            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    text: {
        color: 'white',
        fontSize: 18,
        marginRight: 10,
        alignSelf: 'center',
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: 10,
        height: 50,
    }

});